<html>
<head>
    <title>jQuery Pulse Demo</title>
    <style>
body { font-size: 11pt; }
#top { font-size: 1.2em; }
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
}
#main { height: 22em }
#main, input, select, button { font-size: 12px; }
.select {
    color: #666;
    font-style: italic;
    float: right;
    font-size: 10pt;
}
#red {
    width: 90;
    height: 70;
    background: red;
    padding: 15px;
}
#red .select {
    float: left;
}
#yellow {
    width: 200;
    height: 200;
    background: yellow;
    margin: 10px
}
.pulse-working {
    font-weight: bold;
}
.pulse-error {
    color: #FFF;
    background: red;
}
    </style>
    <script type="text/javascript" src="../../jquery.1.4.2.js"></script>
    <script type="text/javascript" src="jquery.pulse.js"></script>
    <script type="text/javascript" src="../../trunk/jquery.values.js"></script>
    <script type="text/javascript" src="../log/log.js"></script>
    <script type="text/javascript">
$(function() {
    $('#toggle').click(function() {
        var o = $.values();
        // empty string -> undefined
        for (var k in o) if (o[k] == '') delete o[k];
        $(o.select).pulse(o.effect);
    });
});
    </script>
</head>
<body>
<div id="top" class="box">
    <span class="select">#top.box</span>
    <span title="More options are available than shown too">Defaults are shown.</span>
    Tweak the settings and toggle away!<br>
    View the source code to see more.
</div>
<br clear="all">
<div id="main" class="box">
    $('<select name="select">
        <option>#red span</option>
        <option>#red</option>
        <option>span</option>
        <option>#yellow</option>
        <option>#top</option>
        <option>#toggle</option>
    </select>').pulse('<select name="effect">
        <option></option>
        <option>type</option>
        <option>update</option>
        <option>fade</option>
        <option>update ellipsis</option>
        <option>update type</option>
        <option>fade update</option>
        <option>fade type</option>
    </select>');
    <button id="toggle">Toggle</button>
    <div id="yellow" class="fill">
        <span class="select">#yellow.fill</span>
        <div id="red" class="fill">
            <span class="select">#red.fill</span>
        </div>
    </div>
</div>
</body>
</html>